<!-- 积分操作按钮 -->
<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import IntiteDialog from '@/components/invite-dialog.vue'

defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

const userStore = useUserStore()
const showBreak = ref<boolean>(false)

// 赠送积分
function handleDonate() {
  uni.showToast({
    icon: 'none',
    title: '尽情期待！',
  })
}

</script>

<template>
  <view class="btns-box">
    <view class="btns-item btn-1" @click="handleDonate">
      赠送积分
    </view>
    <view class="btns-item btn-2" @click="showBreak = true">
      脱离关系
    </view>

    <intite-dialog v-model="showBreak" content="您确定离开现在的网络关系么？" />
  </view>
</template>

<style lang="scss" scoped>
	.btns-box {
	  padding-top: 29px;
	  display: flex;

	  .btns-item {
		flex: 1;
		text-align: center;
		border-radius: 8px;
		padding: 8px 0;
		line-height: 24px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		&:active {
		  opacity: 0.9;
		}
		& + .btns-item {
		  margin-left: 27px;
		}

		&.btn-1 {
		  background-color: #ff844c;
		}
		&.btn-2 {
		  background-color: #58618e;
		}
	  }
	}
</style>
